<!DOCTYPE html>
<html lang="en" style="background: #F5F1F0;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加商品</title>
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="css/my/myOrder.css">
</head>

<body>
    <header>
        <img src="img/z-jiantou.png">
        <span>添加商品</span>
    </header>
    <form class="recharge">
        <div class="am-g jine">
            <label>
                <span>商品名称
                    <i style="color:#FC351E;">*</i>
                </span>
                <input type="text" class="input_text0" placeholder="输入商品名称">
            </label>
            <label class="sel_btn">
                <span>商品品牌 </span>
                <div class="input_right">请选择
                    <i></i>
                </div>
            </label>
            <label class="sel_btn">
                <span>分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类</span>
                <i style="color:#FC351E;">*</i>
                <div class="input_right">请选择
                    <i></i>
                </div>
            </label>
            <div class="h4_5 check_div">
                <span>商品属性</span>
                <label>
                    <input type="checkbox" value="1">精品推荐
                    <span class="checkbox_style">
                        <i></i>
                    </span>
                </label>
                <label>
                    <input type="checkbox" value="2">热卖
                    <span class="checkbox_style">
                        <i></i>
                    </span>
                </label>

                <label>
                    <input type="checkbox" value="3">包邮
                    <span class="checkbox_style">
                        <i></i>
                    </span>
                </label>
            </div>
            <div class="shop_img">
                <div class="h4_5">
                    <span>商品图片
                        <i style="color:#FC351E;">*</i>
                    </span>
                    <div class="imageFileInput bg-btn">
                        选择图片
                        <input class="fileInput file_input_1" type="file">
                    </div>
                </div>
                <div class="show_image file_img_1">
                    <img src="img/show_img.png" alt="">
                </div>
            </div>
            <label>
                <span>商品编号
                </span>
                <input type="text" class="input_text" placeholder="输入商品编号">
            </label>
            <label>
                <span>商品条码
                </span>
                <input type="text" class="input_text" placeholder="输入商品条码">
            </label>
            <div class="shop_price">
                <span>商品价格
                    <i style="color:#FC351E;">*</i>
                </span>
                <ul>
                    <li>
                        <input type="text" class="input_text0" placeholder="现价 222">
                        <p class="am-fr" style="color:#aaa;">元</p>
                    </li>
                    <li>
                        <input type="text" class="input_text0" placeholder="现价 222">
                        <p class="am-fr" style="color:#aaa;">元</p>
                    </li>

                </ul>

            </div>
            <label>
                <span>重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量
                </span>
                <input type="text" class="input_text" placeholder="XX">
                <p class="am-fr" style="color:#aaa;">克</p>
            </label>
            <label>
                <span>库&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存
                </span>
                <input type="text" class="input_text" placeholder="数量">
            </label>
            <div class="file_img">
                <div class="h4_5">
                    <span>商品图片
                        <i style="color:#FC351E;">*</i>
                    </span>
                    <div class="imageFileInput bg-btn">
                        选择图片
                        <input class="fileInput file_input_2" type="file">
                    </div>
                </div>
            </div>
            <div class="show_lg_img">
                <div class="show_lg_image file_img_2">
                    <img src="img/show_img.png" alt="">
                </div>
            </div>
            <div class="h4_5">商品规格</div>
            <div class="warning_text">
                提示：每一种规格代表不同型号，例如颜色为一种规格，尺寸为一种规格，如果设置多规格，用户必须每一种规格都选择一个规格项，才能添加购物车或购买。
            </div>
            <label>
                <span>规格名
                </span>
                <input type="text" class="input_text" placeholder="（比如：颜色）">
            </label>
            <div class="shop_img">
                <div class="h4_5">
                    <span>规格项
                    </span>
                    <input type="text" class="gg">
                    <div class="imageFileInput bg-btn">
                        选择图片
                        <input class="fileInput file_input_3" type="file">
                    </div>
                </div>
                <div class="show_image file_img_3">
                    <img src="img/show_img.png" alt="">
                </div>
            </div>
            <div class="h4_5 gg_btn">
                <button type="button">
                    <i></i>添加规格项</button>
                <button type="button">
                    <i></i>删除规格</button>
            </div>
        </div>
        <div class="recharge">
            <div class="am-g jine">
                <label>
                    <span>算力积分
                    </span>
                    <input type="text" class="input_text" placeholder="输入对应积分">
                </label>
                <label class="sel_btn">
                    <span>运费设置</span>
                    <div class="input_right">运费模板
                        <i></i>
                    </div>
                </label>
                <div class="h4_5 check_div">
                    <span>是否上架</span>
                    <label>
                        <input type="radio" name="radio" checked>是
                        <span class="checkbox_style">
                            <i></i>
                        </span>
                    </label>
                    <label>
                        <input type="radio" name="radio">否
                        <span class="checkbox_style">
                            <i></i>
                        </span>
                    </label>
                </div>
            </div>
        </div>
        <div class="recharge_btn">
            <button class="bg-btn" type="button">提交</button>
        </div>
    </form>

    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(".file_input_1").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            // console.log("objUrl = " + objUrl);
            if (objUrl) {
                $(".file_img_1 img").attr("src", objUrl);
            }
        });
        $(".file_input_2").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            if (objUrl) {
                $(".file_img_2 img").attr("src", objUrl);
            }
        });
        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    </script>
</body>

</html>